<!--
 * @Author: your name
 * @Date: 2020-09-10 14:13:38
 * @LastEditTime: 2021-10-25 15:23:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/Gatt/components/GattDate/components/FirstRow.vue
-->
<template>
  <div class="gatt-main-row">
    <template v-if="currentDaySize.mode === 'halfYear'">
      <template >
        <div
          class="gatt-main-row-colum"
          v-for="item in allDays"
          :key="item.year"
          :style="{ width: item.days * currentDaySize.value + 'px' }"
        >
          <div class="gatt-main-row-colum-date">
            {{ item.year }}年
          </div>
        </div>
      </template>
    </template>
    <template v-else>
      <template v-for="item in allDays">
        <div
          class="gatt-main-row-colum"
          v-for="(month, key) in item.month[0]"
          :key="month + 'month' + key"
          :style="{ width: month.dayArr.length * currentDaySize.value + 'px' }"
        >
          <div class="gatt-main-row-colum-date">
            {{ item.year }}年{{ key }}月
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'FirstRow',
  props: {
    allDays: {
      type: Array,
      default: () => []
    },
    currentDaySize: {
      type: Object,
      default: () => {
        return { label: '按天', value: 40, mode: 'day' }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .gatt-main-row{
    display: flex;
    height: 100%;
    padding-left: 1px;
    border-top: 1px solid #EBEEF5;
    &-colum{
      height: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #d7d7d7;
      border-right: 1px solid #d7d7d7;
      &:last-child{
        border-right: none;
      }
      &-date{
        line-height: 21px;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #909090 !important;
      }
    }
  }
</style>
